<script setup lang="ts">
import { ref } from 'vue';
import { rechargeCurrency  ,queryConfig, getBalances } from '/@/apis/userApi';
import { useRequest } from 'vue-request';
import { NotifySuccess, isNull, NotifyWarn  } from '/@/utils';
import { i18nTranslate } from '/@/i18n';
import { upload } from '/@/utils/request';
import { useRouter } from 'vue-router';
import { useUserId } from '/@/hooks';
const router = useRouter();
const { getUserId } = useUserId();
const countsList = ref([1000, 3000, 5000, 10000, 30000, 50000]);
const files = ref([]);
const rechargeAmount = ref();
const paymentVoucher = ref('');
const walletAddress = ref('');
const minAmount = ref(0);
const tabsActive = ref(0);
const assetsBalance = ref();
const rechargeNum = (item: any) => {
  rechargeAmount.value = item;
};
const handleAfterRead = async (varFile: any) => {
  try {
    // 文件读取成功后开始上传
    const uploadedData: any = await upload(varFile.file as File);
    paymentVoucher.value = uploadedData;

    //  cover
  } catch (error) {
    files.value = [];
    console.error(error);
    // 上传失败了
    varFile.state = 'error';
  }
};
const onSubmit = () => {
  if (isNull(rechargeAmount.value)) {
    NotifyWarn(i18nTranslate('Customamount')); 
  }  else if (isNull(paymentVoucher.value) && tabsActive.value) {
    NotifyWarn(i18nTranslate('Uploadscreenshotofsuccessfulpayment'));
  }else if (rechargeAmount.value * 1 < minAmount.value) {
    NotifyWarn(i18nTranslate('Theminimumrechargeamountis') + minAmount.value);
  } else {
    const params = {
      memberId: getUserId(),
      amount: rechargeAmount.value,
      paymentVoucher: tabsActive.value ? paymentVoucher.value : '',
      moneyAddr: tabsActive.value ?walletAddress.value : '',
    };
    requestRechargeCurrency.run(params);
  }
};
const requestRechargeCurrency= useRequest(rechargeCurrency, {
  manual: true,
  onSuccess(data: any) {
    NotifySuccess(i18nTranslate('Successful'));
    tabsActive.value? router.push('/fund?fundType=deposit'):router.replace('/me/customer');
  },
  onError(data: any) {
    return;
  },
});
useRequest(queryConfig, {
  defaultParams:[{paramsKey :'WalletAddress'}],
  onSuccess(data: any) {
    walletAddress.value = data;
  },
});
useRequest(queryConfig, {
  defaultParams:[{paramsKey :'MinAmount'}],
  onSuccess(data: any) {
    minAmount.value = data || 0;
  },
});
useRequest(getBalances, {
    defaultParams: [{ member: getUserId(), currency: 'USD' }],
    onSuccess(data: any) {
      if (!data) {
        return;
      }
      if (data.length) {
        assetsBalance.value = data[0].assetsBalance.toFixed(2);
      }
    },
  });
</script>

<template>
  <div class="recharge">
    <AppBar back :primary="true" :title="$t('Recharge')"> </AppBar>
    <div class="recharge_tab">
      <van-tabs shrink v-model:active="tabsActive">
        <van-tab :title="$t('CASHRECHARGE')"></van-tab>
        <van-tab :title="$t('USDTRECHARGE')"></van-tab>
      </van-tabs>
    </div>
    <div class="current-balance">
      <div>
          <p class="p1">{{ $t('Currentbalance') }}</p>
          <p class="p2">{{ assetsBalance }}</p>
      </div>
      <div class="img-box">
        <img :src="$img('me/recharge.png')" />
      </div>
    </div>
    <div class="recharge_content">
      <p class="content_title">{{ $t('Rechargeamount') }}</p>
      <div class="count_box">
        <div class="counts" :class="item == rechargeAmount ? 'active' : ''" @click="rechargeNum(item)" v-for="(item, index) in countsList" :key="index">
           {{ item }} <span v-if="tabsActive">&nbsp;$</span>
        </div>
      </div>
      <p class="content_title">{{ $t('Customamount') }}</p>
      <p class="content_title_sub">{{ $t('Theminimumrechargeamountis') +  minAmount }}</p>
      <div class="input_number">
        <van-field v-model="rechargeAmount" type="number"  />
      </div>
    
   
      <div v-if="tabsActive">
         <!-- 钱包地址 -->
        <div class="address_box">
          <p class="content_title">{{ $t('Depositwallet') }}</p>
          <div class="address_copy" @click="$copyText(walletAddress)">
              <img :src="$img('me/copy_icon.png')" />
            </div>
        </div>
        <InputBase disabled v-model="walletAddress"></InputBase>
        <p class="content_title">{{ $t('Uploadscreenshot') }}</p>
        <p class="content_title_sub">{{ $t('Uploadscreenshotofsuccessfulpayment') }}</p>
        <div class="content_uploader">
          <var-uploader v-model="files" :maxlength="1" @after-read="handleAfterRead" />
        </div>
      </div>
    
    </div>
    <div class="submit_button">
      <LargePrimaryButton block @click="onSubmit" >{{
        $t('Submit')
      }}</LargePrimaryButton>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.recharge {
  padding-bottom: 50px;

  .recharge_tab {
    background: #111111;
    padding: 35px 26px;
    width: 100%;
  }
  .current-balance {
    display: flex;
    justify-content: space-between;
    padding: 0px 70px 0px 50px;
    align-items: center;
    .img-box {
      width: 253px;
      height: 190px;
    }
    .p1 {
        font-size: 26px;
        color: rgba(255,255,255,0.85);
      }
      .p2 {
        margin-top: 23px;
        font-size: 48px;
        font-weight: 700;
      }
  }
  .recharge_content {
    padding:10px 30px 60px 30px;
    background: #242424;
    margin: 0 30px;
    border-radius: 20px;
    .content_title {
      font-size: 32px;
      font-weight: 500;
      margin-top: 30px;
     
    }

    .content_title_sub {
      font-weight: 500;
      font-size: 26px;
      color: #999999;
      margin-top: 15px;
    }

    .count_box {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin: 20px 0 30px;

      .counts {
        @include center;
        width: 200px;
        height: 120px;
        border-radius: 16px;
        background: rgb(17, 17, 17);
        border: 2px solid rgb(17, 17, 17);
        margin-bottom: 14px;
        &.active {
          border: 2px solid #0063F5;
          color: #0063F5;
        }
      }
    }

    .input_number {
      margin-top: 20px;
      height: 98px;
   
    }

    .content_uploader {
      margin-top: 30px;
    }

    .submit_button {
      margin-top: 40px;
    }
    .address_box {
      @include align-center;
      justify-content: space-between;
      margin-top: 30px;
      .content_title {
        margin-top: 0;
        margin-bottom: 20px;
      }
    }
    .address_copy {
        width: 26px;
        height: 26px;
        img {
          width: 100%;
          height: 100%;
        }
    }
  }
  .submit_button {
    margin:48px 30px ;
  }
}
</style>
<style lang="scss">
.recharge {
  .var-button--primary {
    background: #0063F5;
  }

  .van-checkbox__icon {
    font-size: 24px;
  }
  .van-cell {
    border-radius: 8px;
    background: rgb(17, 17, 17);
    .van-field__control {
      color: #fff;
    }
  }
  .var-form-details__extra-message {
    display: none;
  }
  .van-tab__text--ellipsis {
      font-size: 30px;
      font-weight: 500;
      color: #999999;
    }
    .van-tabs__nav {
      width: 100%;
      height: 68px;
      background: #242424;
      margin-bottom: 14px;
      border-radius: 16px;
      padding: 5px;  
    }
    .van-tab {
      width: 50%;
    }
    .van-tab__text {
      color: #fff;
    }
    .van-tab--active {
      background: #0063F5;
      border-radius: 16px;
      font-weight: 400;
      .van-tab__text {
        font-size: 30px;
        color: #fff;
      }
    }
    .van-tabs__line {
      display: none;
    }
    .hl-input-box .var-input  {
      .var-field-decorator__controller {
         background: rgb(17, 17, 17);
      }
    }
    
    .var-uploader__action {
        background: #111111;
    }
}
</style>